<!--  -->
<template>
  <div class='headers'>
    viewer 图片插件的使用
    <p>一、1.安装插件依赖：<br>npm install v-viewer --save
      <br>
      二、main.js 中 全局引入：
      <br>
      import 'viewerjs/dist/viewer.css'<br>
      import Viewer from 'v-viewer'<br>
      Vue.use(Viewer, { name: 'viewer' });<br>
      页面中使用viewer标签包住img就可以
    </p>
    <viewer>
      <img src="../../assets/6.png" alt="" width="100%">
      <img src="../../assets/7.png" alt="" width="100%">
    </viewer>
    <navs/>
     <div style="width:100%;height:60px"></div>
  </div>
</template>

<script>
import navs from './navs.vue';

  export default {
  components: { navs },
    name: '',
    data() {
      //这里存放数据
      return {

      };
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {

    },
    //方法集合
    methods: {

    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //beforeCreate() {}, //生命周期 - 创建之前
    //beforeMount() {}, //生命周期 - 挂载之前
    //beforeUpdate() {}, //生命周期 - 更新之前
    //updated() {}, //生命周期 - 更新之后
    //beforeDestroy() {}, //生命周期 - 销毁之前
    //destroyed() {}, //生命周期 - 销毁完成
    //activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  }

</script>
<style lang='' scoped>
  /* @import url(); 引入公共css类 */

</style>
